<template>
    <transition name="move">
      <div class="content">
        <div class="current-bar">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="item in currentList" :to="item.url" :key="item.abv">{{ item.content }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <slot name="list">

        </slot>

        <slot></slot>

        <slot name="page">

        </slot>

        <div class="loading-wrap" v-show="!contentLoading">
          <loading></loading>
        </div>
      </div>
    </transition>
</template>

<script type="text/ecmascript-6">
    import Loading from 'base/loading/loading'

    export default {
      props: {
        contentLoading: {
          type: Boolean,
          default: false
        },
        currentList: {
          type: Array,
          default: []
        }
      },
      created() {

      },
      methods: {

      },
      components: {
        Loading
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .content
    position: relative
    min-height: 760px
    margin-left: 220px
    width: 770px
    padding-bottom: 80px
    .loading-wrap
      ltp(0, 0)
      wh(100%, 100%)
      background-color: rgba(0,0,0,.4)
    .current-bar
      hh(14px)
      padding: 10px 0
      overflow: hidden;
    .cc
      .title
        h2
          hh(40px)
          width: 200px
          margin: 20px auto 0
          text-align: center
          font-weight: bold
          border-bottom: 2px solid $back
          no-wrap()
          sc($font-large-x, $vice-color)
      .container
        padding: 30px 10px

  .move-enter-active
    .content
      transform: translate3d(0, 0, 0)
      transition-timing-function: cubic-bezier(0, .57, .44, 1.97)
  .move-enter, .move-leave-active
    .content
      transform: translate3d(50px, 100px, 0)
      transition-timing-function: cubic-bezier(0, .57, .44, 1.97)

  @media(min-width:1200px)
    .side
      text-align: left
  @media(max-width:1220px)
    .content
      width: 547px
  @media(max-width:828px)
    .side
      text-align: left
  @media(max-width:788px)
    .content
      width: 475px
      margin-left: 0
  @media(max-width:496px)
    .content
      width: 340px
</style>
